<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>H5+JS+CSS3实现七夕言情</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-3.2.1.js"></script>
</head>
<body>
    <div id="content">
        <ul id="content-wrap">
            <li>页面1</li>
            <li>页面2</li>
            <li>页面3</li>
        </ul>
        <div class="button">
            <button>点击切换页面</button>
        </div>
    </div>

    <script>
        // var container = $("#content");
        // // 获取第一个子节点
        // var element = container.find(":first");
        // // li页面数量
        // var slides = element.find("li");
        // // 获取容器尺寸
        // var width = container.width();
        // var height = container.height();
        // // 设置li页面总宽度
        // element.css({
        //     width  : (slides.length * width) + 'px',
        //     height : height + 'px'
        // });
        // // 设置每一个页面li的宽度
        // $.each(slides, function(index) {
        //     var slide = slides.eq(index); // 获取到每一个li元素    
        //     slide.css({ // 设置每一个li的尺寸
        //         width: width + 'px',
        //         height: height + 'px'
        //     });
        // });
    
        // // 绑定一个事件，触发通过
        // $('button').click(function() {
        //     // 在5秒的时间内，移动X的位置，为2个页面单位
        //     // 让页面开始滚动
        //     element.css({
        //         'transition-timing-function' : 'linear',
        //         'transition-duration' : '5000ms',
        //         'transform' : 'translate3d(-' + (width*2) + 'px, 0px, 0px )'
        //     });
        // });

        var box = $("#content");
        var boxUl = box.find(":first");
        var boxLi = boxUl.find("li");
        var width = box.width();
        var height = box.height();
        $.each(boxLi,function(index){
            boxLi.css({
                width:width + 'px',
                height:height + 'px'
            })
        });
        boxUl.css({
            width: (boxLi.length * width) + 'px',
            height: height + 'px'
        });
        $(".button").click(function() {
            boxUl.css({
                'transition-timing-function' : 'linear',
                'transition-duration' : '5000ms',
                'transform' : 'translate3d(-' + (width*2) + 'px, 0px, 0px )'
            });
        });
    </script>
</body>
</html>